<template>
	<div class="upload-page">
		<el-form class="input-wrap">
			<el-form-item label="cdn主体" required>
				<el-select v-model="scope" placeholder="请选择" size="mini" @change="changeCdn">
					<el-option
						v-for="item in cdnOpts"
						:key="item.scope"
						:label="item.title"
						:value="item.scope"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="cdn前缀" required>
				<el-input size="mini" v-model="prefix"></el-input>
				<p class="input-tip">上传文件存放的cdn目录</p>
			</el-form-item>
			<el-form-item label="时间戳后缀" required>
				<el-switch v-model="timestampBol"></el-switch>
			</el-form-item>
		</el-form>
		<el-upload
			class="upload-demo"
			drag
			multiple
			:action="uploadQiniuUrl"
			:data="qiniuData"
			:show-file-list="false"
			:before-upload="beforeUpload"
			:on-success="uploadSuccess"
		>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<div class="link-list">
			<template v-for="item in fileList">
				<el-image
					style="width: 100px; height: 100px"
					:src="item"
					:preview-src-list="fileList"
					fit="contain"
				></el-image>
				<el-button
					type="text"
					size="mini"
					:key="item"
					class="link"
					v-clipboard:copy="item"
					v-clipboard:success="onCopy"
					>{{ item }}</el-button
				>
			</template>
		</div>
	</div>
</template>

<script>
export default {
	name: "upload",

	data() {
		return {
			scope: "zhongchuangtengda",
			prefix: "images/nest/",
			cdnOpts: [
				{
					title: "内部",
					scope: "zhongchuangtengda",
					domain: "https://cdn.01lb.com.cn/",
				},
				{ title: "公共", scope: "images", domain: "https://image.01lb.com.cn/" },
				{
					title: "汇丰",
					scope: "01huifeng",
					domain: "https://hfcdn.01lb.com.cn/",
				},
			],
			qiniuData: {
				key: "",
				token: "", // 七牛参数
			},
			uploadQiniuUrl: "https://upload-z2.qiniup.com/", // 七牛域名
			domain: "", // 服务器子域名
			timestampBol: true,
			action:
				process.env.NODE_ENV == "development"
					? "http://192.168.2.145:3001/admin/upload-image"
					: `${location.origin}/admin/upload-image`,
			fileList: [],
		};
	},

	created() {
		this.changeCdn(this.scope);
	},

	methods: {
		// 切换cdn主体
		changeCdn(scope) {
			let cdn = this.cdnOpts.find((e) => e.scope === scope);
			this.scope = scope;
			this.domain = cdn.domain;
			this.getQiniuTokenFn();
		},

		// 获取七牛token
		getQiniuTokenFn() {
			this.$axios.post("qiniuToken", { scope: this.scope }).then((res) => {
				this.qiniuData.token = res.uploadToken;
			});
		},

		// 上传前
		beforeUpload(file) {
			this.qiniuData.key = `${this.prefix}${
				this.timestampBol ? new Date().getTime() + "_" : ""
			}${file.name}`;
		},

		// 上传成功
		uploadSuccess(res) {
			this.fileList.push(this.domain + res.key);
		},

		// 复制
		onCopy() {
			this.$message({
				type: "success",
				message: "复制成功!",
				duration: 1000,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.upload-page {
	padding: 30px 20px;
	box-sizing: border-box;

	.input-wrap {
		.el-input {
			width: 285px;
		}
		.input-tip {
			color: #666;
			margin: -10px 0 0 70px;
		}
		.el-form-item {
			margin-bottom: 0;
		}
	}
	.link-list {
		height: 500px;
		overflow-y: scroll;
		.link {
			display: block;
			margin: 0;
		}
	}
}
</style>
